<template>
	<view class="con">
		<view class="navselect">
			<view class="navselect_item" @click="opena">位置<view class="iconfont icon-gengduo"></view>
			</view>
			<view class="navselect_item" @click="changezj"><span :class="{colororing:zjdata!==0}">租金</span>
				<view class="duo">
					<view class="iconfont icon-jiantou_zuo ac" :class="{colororing:zjdata==1}"></view>
					<view class="iconfont icon-jiantou_zuo" :class="{colororing:zjdata==2}"></view>
				</view>
			</view>
			<view class="navselect_item" @click="changearea"><span :class="{colororing:areadax!==0}">房屋大小</span>
				<view class="duo">
					<view class="iconfont icon-jiantou_zuo ac" :class="{colororing:areadax==1}"></view>
					<view class="iconfont icon-jiantou_zuo" :class="{colororing:areadax==2}"></view>
				</view>
			</view>
			<view class="navselect_item">房屋租赁</view>
		</view>
		<scroll-view class="context" scroll-y @scrolltolower="scrollbottom">
			<view class="conbox">
				<view class="card" v-for="(i,index) in hosedata" :key="index">
					<SyCardVue :data="i"></SyCardVue>
				</view>
			</view>
			<uni-load-more iconType="snow" :status="currdata.length>=6?`loading`:`no-more`"></uni-load-more>
		</scroll-view>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue'
	import SyCardVue from '../syCard/syCard.vue';
	const prop = defineProps(['hosedata', "currdata"])
	const emit = defineEmits(['abc',"changeindex","changezz","openciti"])
	const zjdata = ref(0)
	const areadax = ref(0)
	const changearea = () => {
		zjdata.value = 0
		areadax.value++
		if (areadax.value == 3) {
			areadax.value = 0
            emit('changeindex',areadax.value)
			return
 		}
		emit('changeindex',areadax.value)
	}
	const opena=()=>{
		emit('openciti')
	}
	const changezj = () => {
		areadax.value = 0
		zjdata.value++
		if (zjdata.value == 3) {
			zjdata.value = 0
			emit('changezz',zjdata.value)
			return
		}
		emit('changezz',zjdata.value)
	}
	const scrollbottom = () => {
		emit('abc')
	}
</script>

<style lang="scss" scoped>
	.colororing {
		color: #ff9900 !important;
	}

	.con {
		height: 100%;
		width: 100%;
		border-radius: 20rpx;

		.navselect {
			height: 80rpx;
			width: 100%;
			display: flex;
			align-items: center;
			justify-content: space-between;
			font-size: 25rpx;
			padding: 0 10rpx;

			.duo {
				height: 100%;
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
               .icon-jiantou_zuo{
				   font-size: 17rpx !important;
			   }
				>view {
					font-size: 20rpx !important;
				}

				.ac {
					transform: rotate(90deg);
				}
			}

			>view {
				display: flex;
				color: #7b7b7b;
				align-items: center;

				.iconfont {
					transform: rotate(-90deg);
					font-size: 25rpx;
					margin-left: 10rpx;
				}
			}
		}

		.context {
			height: calc(100% - 80rpx);
			box-sizing: border-box;

			.conbox {
				display: grid;
				grid-template-columns: repeat(2, 1fr);
				gap: 20rpx;
				 justify-items: center;
				 align-items: center;
				.card {
					width: 98%;
					height: 600rpx;
					display: block;
					overflow: hidden;
				}
			}
		}
	}
</style>